<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="教育局/主管部门" name="first">
                <el-card shadow="never">
                  <el-row :gutter="20">
                    <el-col :span="3">
                      <el-select v-model="prov" size="small" @change="provincialFn" clearable placeholder="省">
                        <el-option v-for="option in arr" :label="option.name" :value="option.id" :key="option.id">
                        {{ option.name }}
                        </el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="3">
                      <el-select v-model="city" size="small" @change="cityFn" clearable placeholder="市">
                        <el-option v-for="option in cityArr" :label="option.name" :value="option.id" :key="option.id">
                        {{ option.name }}
                        </el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="3">
                      <el-select v-model="district" size="small" clearable placeholder="区">
                        <el-option v-for="option in districtArr" :label="option.name" :value="option.id" :key="option.id">
                        {{ option.name }}
                        </el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="4">
                      <el-input v-model="formDatas.title" clearable placeholder="机构名称" size="small"></el-input>
                    </el-col>
                    <el-col :span="4">
                      <el-input v-model="formDatas.account" clearable placeholder="账号" size="small"></el-input>
                    </el-col>
                    <el-col :span="4">
                      <el-input v-model="formDatas.phone" clearable placeholder="联系电话" size="small"></el-input>
                    </el-col>
                    <el-col :span="3">
                       <el-button type="primary" size="small" @click="getlist(1)">搜索</el-button>
                    </el-col>
                  </el-row>
                </el-card>
                <div align="right" style="margin:15px 0px">
                    <el-button type="danger" plain size="small" v-if="newPasswordbol" @click="newPassword_fn()">重置密码</el-button>
                    <!-- <el-button type="danger" plain size="small">删除</el-button> -->
                    <el-button type="primary" size="small" v-if="addUserbol" @click="$router.push('/addUsers_management')">添加账号</el-button>
                </div>
                <el-card shadow="never">
                  <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                      type="selection"
                      width="55">
                    </el-table-column>
                    <el-table-column
                      prop="title"
                      label="机构名称">
                    </el-table-column>
                    <el-table-column
                      prop="province_title"
                      label="省份">
                    </el-table-column>
                    <el-table-column
                      prop="city_title"
                      label="城市">
                    </el-table-column>
                    <el-table-column
                      prop="area_title"
                      label="区/县">
                    </el-table-column>
                    <el-table-column
                      prop="account_number"
                      label="超级管理员">
                    </el-table-column>
                    <el-table-column
                      prop="phone"
                      label="联系电话">
                    </el-table-column>
                    <el-table-column
                      label="状态">
                      <template slot-scope="scope">
                        {{ scope.row.status === 1 ? '已启用' : '已禁用' }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      v-if="table_bol"
                      label="操作">
                      <template slot-scope="scope">
                        <el-button-group>
                          <el-button style="margin-right:10px" type="text" @click="jurisdiction_fn(scope.row.member_id)">权限管理</el-button>
                          <el-button type="text" @click="edit(scope.row)">编辑</el-button>
                        </el-button-group>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div class="page">
                    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="formDatas.page" :page-size="formDatas.limit" layout="total, prev, pager, next" :total="formDatas.total"> </el-pagination>
                  </div>
                </el-card>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import { getLocalSchools, getGroupList, ResetPassword } from '@/common/api.js'
export default {
  data () {
    return {
      activeName: 'first',
      arr: [],
      prov: '',
      city: '',
      district: '',
      cityArr: [],
      districtArr: [],
      newPasswordbol: false,
      addUserbol: false,
      table_bol: false,
      formDatas: {
        province: '',
        city: '',
        area: '',
        title: '',
        account: '',
        phone: '',
        page: 1,
        limit: 10,
        total: 0
      },
      input: '',
      tableData: [],
      multipleSelection: []
    }
  },
  created () {
    const arrysss = sessionStorage.getItem('list').split(',')
    if (arrysss.includes('resetMechanism')) {
      this.newPasswordbol = true
    }
    if (arrysss.includes('addMechanism')) {
      this.addUserbol = true
    }
    if (arrysss.includes('permissionMechanism')) {
      this.table_bol = true
    }
    getLocalSchools({ parent_id: 1 }).then(res => {
      this.arr = res.data.data
    })
    this.getlist()
  },
  methods: {
    getlist (keys) {
      if (keys === 1) { // 点击查询的查询
        this.formDatas.province = this.prov
        this.formDatas.city = this.city
        this.formDatas.area = this.district
        this.formDatas.page = 1
      }
      getGroupList(this.formDatas).then(res => {
        if (res.data.data === null) {
          this.tableData = []
          this.formDatas.page = 1
          this.formDatas.total = 0
        } else {
          this.tableData = res.data.data.list
          this.formDatas.page = res.data.data.page
          this.formDatas.total = res.data.data.totalNumber
        }
      })
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    newPassword_fn () {
      if (this.multipleSelection.length === 0) {
        this.$message({
          message: '请先选择要重置的对象',
          type: 'warning'
        })
      } else {
        // console.log(this.multipleSelection)
        let arrys = []
        this.multipleSelection.forEach(item => {
          arrys.push(item.id)
        })
        let arryString = arrys.join(',')
        ResetPassword({'member_ids': arryString}).then(res => {
          if (res.data.status === 1) {
            this.getlist()
            this.$message({
              message: res.data.msg,
              type: 'success'
            })
          } else {
            this.$message.error(res.data.msg)
          }
        }).catch(() => {
          this.$message.error('修改失败')
        })
      }
    },
    jurisdiction_fn (id) {
      this.$router.push('/update_management?member_id=' + id)
    },
    // 编辑教育局账号
    edit (row) {
      this.$router.push({
        name: '添加账号',
        params: {
          data: row,
          title: '编辑账号'
        }
      })
    },
    handleCurrentChange (val) { // 分页
      this.formDatas.page = val
      this.getlist()
    },
    provincialFn (val) {
      this.city = ''
      this.district = ''
      this.cityArr = ''
      this.districtArr = ''
      this.arr.forEach(item => {
        if (item.id === val) {
          this.cityArr = item.children
        }
      })
    },
    cityFn (val) {
      this.district = ''
      this.cityArr.forEach(item => {
        if (item.id === val) {
          this.districtArr = item.children
        }
      })
    }
  }
}
</script>
